<template>
  <div class="nav-wrapper">
    <div class="bar-title">
      <div class="bar-title-left">
        <span
          class="bar-title-left-span"
          :class="[showIndex == index ? 'active' : '']"
          v-for="(item, index) in arr"
          :key="index"
          @click.stop="tabClick(index)"
          >{{ item.text }}</span
        >
        <div id="title">二期总小区数:5555</div>
      </div>
      <div id="echarts">
        <!-- {{ item.name }} -->
      </div>
    </div>
  </div>
</template>
 
 <script setup>
import { ref, reactive, onMounted } from "vue";
import * as echarts from "echarts";
let leftBottomList = reactive([
  { name: "历史啊1", value: 6, color: "#5470c6" },
  { name: "历史啊2", value: 6, color: "#91cc75" },
  { name: "历史啊3", value: 6, color: "#fac858" },
  { name: "历史啊4", value: 6, color: "#ee6666" },
  { name: "历史社啊5", value: 6, color: "#73c0de" },
  { name: "历史金啊6", value: 6, color: "#3ba272" },
]);
let leftBottomListB = reactive([
  { name: "历从就结束1", value: 6, color: "#5470c6" },
  { name: "历史啊2", value: 6, color: "#91cc75" },
  { name: "从就结束", value: 6, color: "#fac858" },
  { name: "历史啊4", value: 6, color: "#ee6666" },
  { name: "从就结束5", value: 6, color: "#73c0de" },
  { name: "历史金啊6", value: 6, color: "#3ba272" },
]);
let leftBottomData = reactive([]);
function date() {
  let list = leftBottomList;
  list.map((v) => {
    delete v.color;
    leftBottomData = list;
    console.log(leftBottomData);
  });
}
onMounted(() => {
  date();

  // echarts 图
  let mychart = echarts.init(document.querySelector("#echarts"));
  let data = leftBottomData;

  let option = {
    tooltip: {
      trigger: "item",
    },
    legend: {
      type: "scroll",
      orient: "vertical",

      left: 60,
      top: 180,
      bottom: 20,
      data: data.legendData,
      textStyle: {
        color: "#000",
        fontSize: 16,
      },
    },

    title: {
      textStyle: {
        //标题内容的样式
        color: "white",
        fontStyle: "normal", //lic主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
        fontWeight: "normal", //可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
        fontFamily: "san-serif", //主题文字字体，默认微软雅黑
        fontSize: 18, //主题文字字体大小，默认为18px
      },
    },
    label: {
      show: true,
      position: "center",
    },
    series: [
      {
        radius: ["25%", "50%"],
        center: ["40%", "25%"],
        type: "pie",
        data: data,
        label: {
          show: false, //指示线
        },
        itemStyle: {
          borderRadius: 4,
          borderColor: "#fff",
          borderWidth: 2,
        },
      },
    ],
  };

  mychart.setOption(option);
});

//头部菜单
let showIndex = ref(0);
let arr = reactive([{ text: "二期" }, { text: "三期" }]);
let shuower = reactive([]);
const tabClick = (index) => {
  showIndex.value = index;
  if (index == 0) {
    leftBottomList = shuower;
  } else if (index == 1) {
    shuower.length = 0;
    shuower = leftBottomListB;
    console.log(shuower, "-----------");
  }
};
</script>
 
 <style scoped>
.active {
  background-color: rgb(91, 161, 87);
}
.bar-title-left {
  width: 100%;
  height: 30px;
  /* border:1px solid #000 ; */
  display: flex;
  position: relative;
}
.bar-title-left-span {
  width: 50px;
  height: 30px;
  font-size: 16px;
  border: 1px solid #000;
  display: block;
  line-height: 30px;
  text-align: center;
  color: #000;
  /* padding: 10px; */
}
#echarts {
  width: 300px;
  height: 400px;
  /* background-color: yellowgreen; */
}
#title {
  font-size: 16px;
  height: 100%;
  line-height: 30px;
  position: absolute;
  right: 0;
  border-bottom: 2px solid rgb(128, 128, 196);
}
</style>